<template>
    <div class="ml-16px mr-16px content-container">
        <div class="pl-26px pt-26px pr-26px pb-26px">
            <div>
                <el-button type="primary">添加菜单</el-button>
            </div>
            <div class="mt-16px">
                <el-table :data="tableData" row-key="id" default-expand-all>
                    <el-table-column label="菜单名称">
                        <template #default="scope">
                            {{ scope.row.meta.title }}
                        </template>
                    </el-table-column>
                    <el-table-column label="菜单路由">
                        <template #default="scope">
                            {{ scope.row.path }}
                        </template>
                    </el-table-column>
                    <el-table-column label="图标">
                        <template #default="scope">
                            <svg-icon size="20px" :icon-class="scope.row.meta.icon"></svg-icon>
                        </template>
                    </el-table-column>
                    <el-table-column prop="操作">
                        <template #default="scope">
                            <el-button :icon="Plus" type="primary" text class="!ml-0" @click="handleAdd(scope.row.ID)"></el-button>
                            <el-button :icon="Edit" type="primary" text class="!ml-0" @click="handleEdit(scope.row.ID)"></el-button>
                            <el-button :icon="Delete" type="danger" text class="!ml-0" @click="handleDelete(scope.row.ID)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { Edit,Delete,Plus } from '@element-plus/icons-vue'

const tableData = [
    {
        id: 3,
        path: '/geo',
        component: import('@/layout/index.vue'),
        meta: { title: 'Geo营销', icon: 'slideshow-line' },
        name: 'GEO',
        children: [
            {
                id: 31,
                path: 'project-management',
                component: () => '',
                meta: { title: '项目管理' },
                name: 'GeoProjectManagement',
                children: [
                    {
                        id: 321,
                        path: 'project-add',
                        component: () => import('@/views/geo/project/ProjectAdd.vue'),
                        meta: { title: '添加项目' },
                        name: 'GeoProjectAdd',
                    },
                    {
                        id: 322,
                        path: 'distillation-add',
                        component: () => import('@/views/geo/project/DistillationAdd.vue'),
                        meta: { title: '添加蒸馏词' },
                        name: 'DistillationAdd',
                    }
                ]
            },
        ],
    },

]

function handleAdd(id:number){

}
function handleEdit(id:number){
    
}
function handleDelete(id:number){
    
}
</script>

<!-- <template>
    <div class="ml-16px mr-16px content-container">
        <div class="pl-26px pt-26px pr-26px pb-26px">
            <div>
                <el-button type="primary">添加菜单</el-button>
            </div>
            <div class="mt-16px">
                <el-table :data="tableData" row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
                    <el-table-column prop="菜单名称">
                        <template #default="scope">
                            {{ scope.row.meta.title }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="路由" label="path">
                        <template #default="scope">
                            {{ scope.row.path }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="图标" label="icon">
                        <template #default="scope">
                            <svg-icon size="20px" :icon-class="scope.row.meta.icon"></svg-icon>
                        </template>
                    </el-table-column>
                    <el-table-column prop="操作">
                        <template #default="scope">
                            <el-button :icon="Plus" type="primary" text class="!ml-0" @click="handleAdd(scope.row.ID)"></el-button>
                            <el-button :icon="Edit" type="primary" text class="!ml-0" @click="handleEdit(scope.row.ID)"></el-button>
                            <el-button :icon="Delete" type="danger" text class="!ml-0" @click="handleDelete(scope.row.ID)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Edit,Delete,Plus } from '@element-plus/icons-vue'

const treeProps = reactive({
    checkStrictly: false,
})


const tableData = [
    {
        path: '/geo',
        component: import('@/layout/index.vue'),
        name: 'GEO',
        meta: { title: 'Geo营销', icon: 'slideshow-line' },
        children: [
            {
                path: 'project-management',
                component: () => '',
                name: 'GeoProjectManagement',
                meta: { title: '项目管理' },
                children: [
                    {
                        path: 'project-add',
                        component: () => import('@/views/geo/project/ProjectAdd.vue'),
                        name: 'GeoProjectAdd',
                        meta: { title: '添加项目' },
                        children: []
                    },
                    {
                        path: 'distillation-add',
                        component: () => import('@/views/geo/project/DistillationAdd.vue'),
                        name: 'DistillationAdd',
                        meta: { title: '添加蒸馏词' },
                        children: []
                    },
                    {
                        path: 'distillation-list',
                        component: () => import('@/views/geo/project/DistillationList.vue'),
                        name: 'DistillationList',
                        meta: { title: '蒸馏词问题列表' },
                        children: []
                    }
                ]
            },
            {
                path: 'report',
                component: () => import('@/views/geo/report/index.vue'),
                name: 'Report',
                meta: { title: '效果报表' },
                children: []
            }
        ]
    }

]

function handleAdd(id:number){

}
function handleEdit(id:number){
    
}
function handleDelete(id:number){
    
}
</script>

<style scoped></style> -->